<template>
  <div class="tool">
    <div class="tool-select">
      <img
          src="../assets/images/图层管理-u29.png"
          alt=""
          @click="handleImageClick"
          style="width: 28px; height: 28px"
      />
      <div class="tool-content" v-show="isshowtool">
        <div class="tool-item" @click="baseLayer('sl')">
          <img src="../assets/images/shiLiangEx.jpg" alt="" />
          基础底图
        </div>
        <span class="spliter">|</span>
        <div class="tool-item" @click="baseLayer('yx')">
          <img src="../assets/images/yingXiangEx.jpg" alt="" />
          影像底图
        </div>
        <span class="spliter">|</span>
        <div class="tool-item" @click="baseLayer('dx')">
          <img src="../assets/images/diXingEx.jpg" alt="" />
          地形底图
        </div>
      </div>
    </div>
    <div class="position" @click.stop="resetPoisition">
      <img
          src="../assets/images/panel/位置@2x.png"
          alt=""
          style="width: 28px; height: 28px"
      />
    </div>
    <div class="clear" @click.stop="clearMarkLayer">
      <img
          src="../assets/images/panel/清除@2x.png"
          alt=""
          style="width: 28px; height: 28px"
      />
    </div>
  </div>
</template>

<script>
import {Image} from 'ol/layer'
export default {
  name: "sampleMapTool",
  props: {
    map: Object,
    showtool: String,
  },
  watch: {
    map: function (newData) {
      console.log(newData);
      this.mapNew = newData;
    },
  },
  data() {
    return {
      isshowtool: false,
      mapNew: {},
      vec: "",
      img: "",
      savaLayerNames: ["矢量图层组", "地形图层组", "影像图层组", "边界图层组"],
    };
  },
  methods: {
    handleImageClick() {
      this.isshowtool = !this.isshowtool;
    },
    baseLayer(Val) {
      console.log(this.$props.map.map);
      let vec = this.$props.map.layer.getLayerByName("矢量图层组");
      let img = this.$props.map.layer.getLayerByName("影像图层组");
      let ter = this.$props.map.layer.getLayerByName("地形图层组");
      if (Val == "sl") {
        vec.setVisible(true);
        img.setVisible(false);
        ter.setVisible(false);
      } else if (Val == "yx") {
        vec.setVisible(false);
        img.setVisible(true);
        ter.setVisible(false);
      } else if (Val == "dx") {
        vec.setVisible(false);
        img.setVisible(false);
        ter.setVisible(true);
      }
      this.isshowtool = false;
    },
    //底图复位
    resetPoisition() {
      const coor = [87, 43];
      const zoom = 6;
      this.$props.map.map.getView().animate({
        center: coor,
        zoom,
      });
    },

   //清除标注
   clearMarkLayer() {
      const layers = this.$props.map.map.getLayers().getArray();
      layers.forEach((layer) => {
        const name = layer.get("layerName") || layer.get("name");
        const flag = this.savaLayerNames.find((item) => {
          return item == name;
        });
        if (!flag) {
          console.log(layer);
          if(layer instanceof Image){
            this.$store.getters.Map.map.removeLayer(layer);
          }else{
            console.log('图层类型不是img');
            layer.getSource().clear();
          }
        }
       
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tool {
  position: fixed;
  bottom: 0;
  left: 22rem;
  margin: 4rem;
  z-index: 10;
  padding: 10px;
  // display: flex; /* Ensure items are aligned horizontally */
  // flex-direction: column;
  // gap: 1rem;
  // align-items: center; /* Align items vertically */
  background-color: #1c4969;
  .tool-select {
    margin-bottom: 1rem;
    display: flex; /* Ensure items are aligned horizontally */
    align-items: center;
  }
  .position{
    margin-bottom: 1rem;
  }
  &:hover {
    cursor: pointer;
  }
  .tool-content {
    padding: 0.5rem 0.8rem;
    //   background: $lite-theme !important;
    border: 1px solid #0090dee5 !important;
    border-radius: 0.5rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    span {
      color: #ffffff;
    }
    &:hover {
      cursor: pointer;
    }
    .spliter {
      font-size: 1.8rem;
      font-weight: 100;
    }
    .tool-item {
      padding: 0.1rem 0.1rem;
      border-radius: 0.5rem;
      font-size: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 5rem;
        height: 4rem;
      }
      &:hover {
        background: #3690c1e5;
      }
    }
  }
  .tips {
    width: 15rem;
    padding: 0.1rem 0.5rem;
    background: #12334467 !important;
    border: 1px solid #005f939b !important;
    border-radius: 0.5rem;
    color: #ffffff;
    margin-top: 1rem;
  }
}
</style>
